<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!--360浏览器优先以webkit内核解析-->
    <title>文档检索系统</title>
    <link rel="shortcut icon" href="favicon.ico">
    <link href="../static/css/bootstrap.min.css" th:href="@{/css/bootstrap.min.css}" rel="stylesheet"/>
    <link href="../static/css/font-awesome.min.css" th:href="@{/css/font-awesome.min.css}" rel="stylesheet"/>
    <link href="../static/css/style.min.css" th:href="@{/css/style.min.css}" rel="stylesheet"/>
    <th:block th:include="include :: header('文件上传')"/>
    <th:block th:include="include :: bootstrap-fileinput-css"/>
    <th:block th:include="include :: header('Summernote富文本编辑器')"/>
    <th:block th:include="include :: summernote-css"/>
</head>

<body class="gray-bg">
<div class="row border-bottom white-bg dashboard-header">
    <div class="col-sm-12">
        <div class="file-loading">
            <input id="singleFile" name="file" type="file">
        </div>
        <hr>
    </div>
    <div class="col-sm-12">
        <form id="ordinary-form">
            <div class="select-list">
                <ul>
                    <li>
                        关键字：<input type="text" id="keyWord"/>
                    </li>
                    <li>
                        <a class="btn btn-primary btn-rounded btn-sm" id="search"><i
                                class="fa fa-search"></i>&nbsp;搜索</a>
                        <a class="btn btn-warning btn-rounded btn-sm" onclick="$.form.reset()"><i
                                class="fa fa-refresh"></i>&nbsp;重置</a>
                    </li>
                    <h5>共有<span id="sum">0</span>个相关关键词</h5>
                    <input id="fileName" type="hidden">
                    <input id="newFileName" type="hidden">
                </ul>
            </div>
        </form>
    </div>
    <div class="col-sm-12">
        <div class="ibox float-e-margins">
            <div class="ibox-title">
                <h5>编辑/保存为html代码示例</h5>
                <button id="edit" class="btn btn-primary btn-xs m-l-sm" onclick="edit()" type="button">编辑</button>
                <button id="withdraw" class="btn btn-primary btn-xs m-l-sm" onclick="withdraw()" type="button">撤回操作</button>
                <button id="save" class="btn btn-primary  btn-xs" onclick="save()" type="button">保存</button>
                <a id="outDocx" onclick="outDocx()">
                    <input type="button" title="导出docx文件" value="导出docx文件" class="btn btn-primary  btn-xs">
                </a>
            </div>
            <div class="ibox-content" id="eg">
                <div class="click2edit wrapper" id="content">
                </div>

            </div>
        </div>
    </div>
</div>
<div id="contentHidden" style="display: none"></div>
<script th:src="@{/js/jquery.min.js}"></script>
<script th:src="@{/js/bootstrap.min.js}"></script>
<script th:src="@{/ajax/libs/layer/layer.min.js}"></script>
<th:block th:include="include :: footer"/>
<th:block th:include="include :: bootstrap-fileinput-js"/>
<th:block th:include="include :: summernote-js"/>
<script th:inline="javascript">
    /**
     * 关键字查询并标红
     */
    $("#search").click(function () {
        //关键字数组
        var arrKey=[];
        var keyWord;
        //关键字总数
        var sum = 0;
        //判断是多个查询还是单个
        if($("#keyWord").val().indexOf(",")>0){
            arrKey = $("#keyWord").val().split(",");
        }else{
            //搜索关键字
            arrKey[0] = $("#keyWord").val();
        }
        for (var j=0;j<arrKey.length;j++){
            keyWord = arrKey[j];
            //原内容
            var content1 = $("#content").html();
            //搜索后内容
            var content = "";
            /**
             * 循环获取关键字
             */
            for (var i = 0; i < content1.length; i++) {
                //获取索引值
                var index = content1.toString().indexOf(keyWord);
                //查询结果不为空时
                if (index > 0) {
                    //截取
                    content += content1.substr(0, index);
                    /**
                     * 关键字标红
                     */
                    content += "<span style='color: red' name='search'>" + content1.substr(index, keyWord.length) + "</span>";
                    sum++;
                    content1 = content1.substr(index + keyWord.length);
                } else {
                    /**
                     * 累加剩余部分
                     */
                    content += content1;
                    /**
                     * 赋值标红
                     */
                    $("#content").html(content);
                    //退出
                    i = content1.length;
                }
            }
        }
        //赋值总数
        $("#sum").html(sum);
    });
    $(document).ready(function () {
        $('.summernote').summernote({
            lang: 'zh-CN'
        });
        // 单文件上传
        $("#singleFile").fileinput({
            uploadUrl: ctx + 'common/upload',
            maxFileCount: 1,
            autoReplace: true,
            allowedFileExtensions: ['doc', 'docx'],//可上传文件后缀类型
        }).on('fileuploaded', function (event, data, previewId, index) {
            var rsp = data.response;
            log.info("reutrn newFileName：" + rsp.newFileName)
            log.info("return originalFilename：" + rsp.originalFilename)
            $("#fileName").val(rsp.originalFilename)
            $("#newFileName").val(rsp.newFileName)
            $("#content").html(rsp.content);
            $("#contentHidden").html(rsp.content);

        }).on('fileremoved', function (event, id, index) {
            $("input[name='" + event.currentTarget.id + "']").val('')
        })
    });
    var edit = function () {
        $("#eg").addClass("no-padding");
        $('.click2edit').summernote({
            lang: 'zh-CN',
            focus: true
        });
    };
    var save = function () {
        $("#eg").removeClass("no-padding");
        var aHTML = $('.click2edit').summernote('code');
        $('.click2edit').summernote('destroy');
    };
    var outDocx = function () {

        // 使用outerHTML属性获取整个table元素的HTML代码（包括<table>标签），然后包装成一个完整的HTML文档，设置charset为urf-8以防止中文乱码
        var html = "<html><head><meta charset='utf-8' /></head><body>" + $("#content").html() + "</body></html>";
        // 实例化一个Blob对象，其构造函数的第一个参数是包含文件内容的数组，第二个参数是包含文件类型属性的对象
        var blob = new Blob([html], { type: 'application/msword;charset=utf-8' });
        var a = document.getElementById("outDocx");
        // 利用URL.createObjectURL()方法为a元素生成blob URL
        a.href = URL.createObjectURL(blob);
        // 设置文件名
        a.download = $("#fileName").val();
        $.ajax({
        	type: "post",
        	url: ctx + "record/insertRecord",
        	data: {
        		"oldWordName": $("#fileName").val(),
        		"name": $("#newFileName").val(),
        		"recordTime": new Date(),
        	},
        	success: function(r) {
                layer.msg("导出成功！正在下载……请于浏览器底部查看下载进度及文档信息！", {time:6666, icon:6, shift:6});
        	}
        });
    };
    /**
     * 撤回所有操作
     */
    $("#withdraw").click(function () {
        $("#content").html($("#contentHidden").html());
    });
</script>
</body>
</html>
